<template>
	<view class="box box-bills">
		<view class="box-hd"><h2 class="title">交易账单</h2></view>
		<el-form>
			<view class="filter">
				<view class="form-wrap">
					<view class="form-group form-group-select">
						<view style="width: 100%; margin: auto;margin-bottom: 20px;">
							<view class="itemType"><label>账单类型</label></view>

								<xfl-select 
								:list="list"
								:showItemNum="6" 
								style="width: 100%"
								@change="billTpye"
								:isCanInput="false" 
								:listShow="false"
								:clearable="false"
								:style_Container="listBoxStyle"
								:placeholder = "'选择账单类型'"
								:initValue="'全部'"
								>
								</xfl-select>

						</view>
			
					</view>	
				</view>
			</view>
			 <view class="block">
				 <view class="itemType"><label>起止时间</label></view>
				  <el-date-picker
				       v-model="value1"
					    @change="changeStatus"
						value-format="yyyy-MM-dd"
				       type="daterange"
				       range-separator="至"
				       start-placeholder="开始日期"
				       end-placeholder="结束日期">
				     </el-date-picker>
			  </view>
		</el-form >
		  <span class="btn btn-blue fl" @tap="bill">查 询</span>
		  
		  <view class="header">
		  	<view class="header_cengter" v-for="(item,index) in billsList" :key="index">
		  		<view class="left">
		  			<p>{{item.record_desc}}</p>
		  			<span class="ny">{{item.create_time}}</span>
		  		</view>
		  		<view class="right">
					<p class="corlo_money" v-if="item.money>0">{{item.money}}</p>
		  			<p class="je" v-else-if="item.money<0">{{item.money}}</p>
					<view  class="billCenter">{{item.record_type}}</view>
		  		</view>
		  	</view>
			<view class="loadMore" v-if="!fang" :class="{click_loadMore: click_loadMore === false}" @click="loadMore">加载更多</view>
		  </view>
		  
		  <view class="data-empty" v-if="fang"><img src="/static/images/order_g.png" alt=""> <p>您还没有交易账单</p></view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				spliceNum:20,
				click_loadMore:true,
				fang:true,
				billsList:[],//交易账单数据
				value1: [],
				billData:{
					user_id:this.$store.state.userInfo.user_id,
					state:'',
					start_time: '',
					end_time: '',
					page:1,
					limit:10,
				},
				listBoxStyle: `height: 50px; font-size: 16px;`,
				list: [
					'全部',
					'入账',
					'提现',
		
				],
				
			}
		},
		mounted() {
			
		},
		methods: {
			loadMore(){
				this.click_loadMore = false
				if(this.click_loadMore === false){
					this.billData.limit = 1000
				}
				this.$http.post('/User/getBillList',this.billData).then(res => {
					if(res.data.code == 1){
						
						if(this.billsList.length == res.data.data.row.length){
							uni.showToast({icon: 'none',title: '没有更多数据了！'});
						}else{
							this.billsList = res.data.data.row.splice(0,this.spliceNum)
							this.spliceNum+=20
							
						}
					}
				})
			},
			billTpye(value){
				this.billData.state = value.index
			},
			changeStatus(){
				this.billData.start_time = this.value1[0]
				this.billData.end_time = this.value1[1]
			},
			bill(){//查询交易账单
			this.billData.limit = 10
				this.$http.post('/User/getBillList',this.billData).then(res => {
					if(res.data.code == 1){
						this.fang = false
						if(res.data.data.row.length<=0){
							 uni.showToast({icon: 'none',title: '选中的时间段没有交易'})
						}
						this.billsList = res.data.data.row
						console.log(this.billsList)
					}
				})
			},
			visibleChange(isShow){ // 列表框的显示隐藏事件
				console.log('isShow::', isShow);
			},
			change({newVal, oldVal, index, orignItem}){ 
				console.log(newVal, oldVal, index, orignItem);
			},
			open(){
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log(e);
			}
			
		}
	}
</script>
 
<style lang="scss">
.box{
	padding: 20px 15px;
	.box-hd {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	    -ms-flex-align: end;
	    align-items: flex-end;
		line-height: 28px;
		.title {
		    font-size: 18px;
			font-weight: 700;
		}
	}
	.filter{
		.form-wrap{
			margin: 0;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-flow: row wrap;
			flex-flow: row wrap;
			-ms-flex-pack: justify;
			justify-content: space-between;
			.form-group {
			    width: 100%;
			    margin: 10px 0;
				display: flex;
			}
		}
	}
}
.itemType{
	font-size: 16px;
	font-weight: bold;
	padding-bottom:6px;
}
.show-box .list-container .popper__arrow{
	left: 50%!important;
}
.show-box{
	border-radius:0px;
	    width: 90%;
}

.show-box.active[data-v-64567a38] {
    border-color: #CCCCCC!important;
}
.item.active:nth-child(1){
    color: #409eff;
    font-weight: 500;
    background-color: #f5f7fa;
}
/deep/ .el-date-editor--datetimerange.el-input__inner {
    width: 100%!important;
}
/deep/ .el-input__inner{
	  width: 18.5rem!important;
}
/deep/ .el-picker-panel{
	left: 0px!important;
	width: 100%!important;
}
/deep/ .el-date-range-picker.el-picker-panel__body {
    min-width: 100%!important;
}
/deep/ .el-date-range-picker {
    width: 100%!important;
}
.btn {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    box-sizing: border-box;
	padding: 0 24px;
	width: 100%;
	margin: 20px 0;
}
.btn.btn-blue {
    background: #008bf7;
    color: #fff;
}
.data-empty {
    padding: 100px 0;
    text-align: center;
	img {
	    width: 120px;
	}
	p {
	    margin-top: 10px;
	}
}


.header{
	
	margin-top: 30px;
	
	background: #FFFFFF;
	.header_cengter{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 20px;
		display: flex;
		border-bottom: 1px solid #edf1f4;
		border-top: 1px solid #edf1f4;
		.left{
			
			p{
				font-size: 16px;
			}
			.ny{
				font-size: 10px;
			}
		
		}
		.billCenter{
			font-size: 14px;
			text-align: center;
		
		}
		.right{
			// width: 80px;
			.je{
				color: red;
				font-size: 23px;
				margin-top: -6px;
			}
		}
	}
}
.loadMore{
	color: #BFC3CB;
	margin-top:20px;
	text-align: center;
}
.click_loadMore{
	color: #008BF7;
}
.corlo_money{
	font-size: 23px;
	color: #FFCD42;
}
</style>
